<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HBU书店</title>
    <link rel="stylesheet" href="Index-cs.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.3.0/css/fontawesome.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.3.0/css/fontawesome.css" rel="stylesheet">
</head>
<body>
 <div class="Logo"></div>
  <div class="INDEX">
      <!-- 导航栏-->
      <div id="Main_Left">
          <!--用户登录界面-->
       <div id="Side">
       <div id="Login">
          <img src="Photo/Login.png">
           <div id="gzhissb">
            <p>Hello！</p>
            <p>注册/登录</p>
           </div>
       </div>
       <div id="List">
         <a href="#B1"><div class=" List_BLock Chosed "><p>文学艺术</p></div></a>
         <a href="#B2"><div class="List_BLock "><p>少儿童书</p></div></a>
         <a href="#B3"><div class="List_BLock  "><p>人文社科</p></div></a>
         <a href="#B4"><div class="List_BLock"><p>经管励志</p></div></a>
         <a href="#B5"><div class="List_BLock"><p>生活时尚</p></div></a>
         <a href="#B6"><div class="List_BLock"><p>科技教育</p></div></a>
         <a href="#B7"><div class="List_BLock"><p>影音原版</p></div></a>
         <a href="#B8"><div class="List_BLock"><p>教辅印象</p></div></a>
         <a href="#B9"><div class="List_BLock"><p>家庭园艺</p></div></a>
         <a href="#B10"><div class="List_BLock"><p>终于养生</p></div></a>
         <a href="#B11"><div class="List_BLock"><p>发现</p></div></a>
       </div>
        <script>
           const List_BLocks = document.querySelectorAll('.List_BLock')
           const Title = document.querySelectorAll('.Title')
           for(let i = 0 ; i<List_BLocks.length;i++){
               List_BLocks[i].addEventListener('click',function (){
               document.querySelector('.Chosed ').classList.remove('Chosed')
               this.classList.add('Chosed')
               })
           }
        </script>
       </div>

      </div>
      <!--版心-->
      <div id="Main_Right">
      <div id="bx">
          <!--搜索栏-->
          <div id="Search">
              <!--导航-->
             <ul>
                 <li><a href="#">推荐&nbsp<svg t="1679222872876" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="939" width="20" height="20"><path d="M598.354747 67.542626c-48.148687 0-90.130101 32.905051-98.960808 79.437576 0 0-14.312727 72.882424-21.798787 99.090101-12.308687 43.196768-55.363232 90.944646-86.522829 106.188283-23.531313 11.636364-110.99798 11.765657-116.350707 11.765656H155.707475c-32.762828 0-59.384242 26.479192-59.384243 59.384243v475.022222c0 32.762828 26.479192 59.384242 59.384243 59.384242h548.033939c88.126061 0 163.025455-64.452525 176.135758-151.647676l45.873131-305.713132c10.834747-71.809293-44.8-136.274747-117.423838-136.274747H673.254141s20.066263-66.469495 30.228687-178.669899c5.081212-56.837172-35.167677-110.99798-94.280404-117.152323-3.620202-0.54303-7.227475-0.814545-10.847677-0.814546zM333.705051 898.288485V421.533737c38.917172-2.534141 66.999596-8.016162 83.574949-16.316767 43.726869-21.669495 99.633131-81.040808 117.281616-143.088485 7.899798-27.681616 21.39798-96.155152 23.001212-104.184243 3.47798-17.92 20.596364-31.159596 40.649697-31.159596 1.603232 0 3.206465 0.129293 4.822627 0.271516 28.211717 2.947879 43.326061 29.698586 41.32202 52.686868-9.360808 103.912727-27.823838 166.503434-28.082425 166.904243l-23.130505 76.489697h215.182223c17.519192 0 33.564444 7.356768 45.071515 20.596363 11.507071 13.239596 16.316768 30.228687 13.640404 47.618586L821.294545 797.052121c-8.830707 58.569697-58.181818 101.094141-117.423838 101.094142h-370.165656v0.142222z m-177.997576 0v-475.022222h118.626262v475.022222H155.707475z m0 0" p-id="940" fill="#ffffff"></path></svg></a> </li>
                 <li><a href="#">新品&nbsp<svg t="1679223090336" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3332" width="20" height="20"><path d="M965.76 576l-74.56-78.08a107.2 107.2 0 0 1-19.84-105.6l40.96-99.84a40.96 40.96 0 0 0-39.68-60.8l-107.84-0.64a107.2 107.2 0 0 1-88.64-60.48l-41.6-99.52a40.96 40.96 0 0 0-71.04-14.72l-78.08 74.24a107.2 107.2 0 0 1-105.6 19.84L280 109.76a40.96 40.96 0 0 0-60.8 39.68L216.96 256a107.2 107.2 0 0 1-60.48 88.64l-99.52 41.6a40.96 40.96 0 0 0-14.72 71.04l74.56 78.08a107.52 107.52 0 0 1 19.84 105.6L96 741.76a40.96 40.96 0 0 0 39.68 60.8l107.84 2.56A107.2 107.2 0 0 1 331.84 864l41.6 99.52a40.96 40.96 0 0 0 71.04 14.72l78.08-74.56a107.2 107.2 0 0 1 105.6-19.84l99.84 40.96a40.96 40.96 0 0 0 60.8-39.68l2.56-107.84a107.2 107.2 0 0 1 60.48-88.64l99.52-41.6a40.96 40.96 0 0 0 14.4-71.04z m-309.44 128c-18.56 3.2-43.2 0-79.36-34.56-25.28-24.96-102.72-118.08-154.88-181.12l37.76 187.52a73.92 73.92 0 0 1-1.92 39.68 51.84 51.84 0 0 1-65.6 29.12A64 64 0 0 1 352 686.72l-50.56-288A59.52 59.52 0 0 1 311.68 352a64 64 0 0 1 43.52-21.76A55.36 55.36 0 0 1 416 352c26.24 29.76 52.16 59.84 77.76 89.92 32 36.8 61.12 73.92 91.52 110.72l-39.04-195.52a64 64 0 0 1 3.2-37.12 48.64 48.64 0 0 1 39.04-32 52.8 52.8 0 0 1 40.96 9.28 71.36 71.36 0 0 1 24.64 47.04L704 630.72A55.68 55.68 0 0 1 656.32 704z" fill="#ffffff" p-id="3333"></path></svg></a> </li>
                 <li><a href="#">限时购&nbsp<svg t="1679223167563" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4435" width="20" height="20"><path d="M945 412H689c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h256c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM811 548H689c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h122c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM477.3 322.5H434c-6.2 0-11.2 5-11.2 11.2v248c0 3.6 1.7 6.9 4.6 9l148.9 108.6c5 3.6 12 2.6 15.6-2.4l25.7-35.1v-0.1c3.6-5 2.5-12-2.5-15.6l-126.7-91.6V333.7c0.1-6.2-5-11.2-11.1-11.2z" p-id="4436" fill="#ffffff"></path><path d="M804.8 673.9H747c-5.6 0-10.9 2.9-13.9 7.7-12.7 20.1-27.5 38.7-44.5 55.7-29.3 29.3-63.4 52.3-101.3 68.3-39.3 16.6-81 25-124 25-43.1 0-84.8-8.4-124-25-37.9-16-72-39-101.3-68.3s-52.3-63.4-68.3-101.3c-16.6-39.2-25-80.9-25-124 0-43.1 8.4-84.7 25-124 16-37.9 39-72 68.3-101.3 29.3-29.3 63.4-52.3 101.3-68.3 39.2-16.6 81-25 124-25 43.1 0 84.8 8.4 124 25 37.9 16 72 39 101.3 68.3 17 17 31.8 35.6 44.5 55.7 3 4.8 8.3 7.7 13.9 7.7h57.8c6.9 0 11.3-7.2 8.2-13.3-65.2-129.7-197.4-214-345-215.7-216.1-2.7-395.6 174.2-396 390.1C71.6 727.5 246.9 903 463.2 903c149.5 0 283.9-84.6 349.8-215.8 3.1-6.1-1.4-13.3-8.2-13.3z" p-id="4437" fill="#ffffff"></path></svg></a> </li>
                 <li><a href="shop.html">购物车&nbsp<svg t="1679230044340" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5350" width="16" height="16"><path d="M384 960c-47.104 0-85.312-36.48-85.312-81.472S336.896 797.12 384 797.12s85.312 36.48 85.312 81.408C469.312 923.52 431.104 960 384 960z m426.688 0c-47.168 0-85.376-36.48-85.376-81.472s38.208-81.408 85.376-81.408c47.104 0 85.312 36.48 85.312 81.408C896 923.52 857.792 960 810.688 960zM262.272 186.24H1024l-91.968 407.232h-577.92l13.12 58.56h554.112l-18.56 81.408H298.24l-31.552-139.968h-0.256l-59.52-265.6-41.152-182.4H0V64h234.752l27.52 122.24z m18.368 81.408L335.68 512h527.424l55.232-244.352H280.64z" fill="#ffffff" p-id="5351"></path></svg></a></li>
             </ul>
              <!--输入-->
              <div id="Input">
                  <input type="text" placeholder="输入关键词" id ='input-box'/>
                  <button id ="btn" ><svg t="1679192713894" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4272" width="32" height="32"><path d="M888.68161 857.569677l-175.091014-175.091014a21.331751 21.331751 0 0 0-30.163096 0c-0.85327 0.85327-1.279905 1.919858-1.919858 2.858454-100.98451 98.382037-259.650076 112.162348-377.699987 32.338935C166.175196 624.669617 129.228603 438.059457 221.424431 301.621576A295.444755 295.444755 0 0 1 357.307687 192.061702a301.716289 301.716289 0 0 1 280.811173 30.632395 301.716289 301.716289 0 0 1 133.238118 248.941537 294.719475 294.719475 0 0 1-22.355675 114.082205 21.331751 21.331751 0 0 0 39.421076 16.297458 336.572371 336.572371 0 0 0 25.598102-130.550317 344.337128 344.337128 0 0 0-152.01006-284.138927A344.294465 344.294465 0 0 0 341.522191 152.512635 337.681622 337.681622 0 0 0 186.056388 277.772679c-105.378851 155.935101-63.227311 369.167287 93.859705 475.271417a344.635773 344.635773 0 0 0 193.180339 59.046287 341.180029 341.180029 0 0 0 225.177966-84.601725l160.244116 160.244115a21.246424 21.246424 0 0 0 30.163096 0 21.331751 21.331751 0 0 0 0-30.163096" fill="#13227a" p-id="4273"></path></svg> </button>
              </div>
          </div>
          <script>
              const  Input = document.querySelector("#Input")
              const  btn = document.querySelector("#btn")
              btn.addEventListener('mouseover',function (){
                  Input.classList.add('Git')

              })
          </script>
          <div id="lbt">
              <a  href="###"  id = "l-go"><div ><</div></a>
              <a  href="###"  id = "r-go"><div >></div></a>
          </div>
          <script>
              const Back = document.querySelector('#lbt')
              const Right = document.querySelector('#r-go')
              const Left = document.querySelector('#l-go')
              let i =0
              Right.addEventListener('click',function (){
                  i=i%4+1
                  Back.style.background = "url('./Photo/LB"+i+".jpg')"
              })
              Left.addEventListener('click',function (){
                  i=(i-1)
                  if(i<0)  i=3
                  Back.style.background = "url('./Photo/LB"+i+".jpg')"
              })
              setInterval(function (){
                  Right.click()
              },2000)
          </script>
           <div class="Section">
               <div class = "Title" id ='B1'>
                   <p>文学艺术</p>
               </div>
               <div class="Books">
                   <a href="infor.html"><div class="book"><div class="BookContent"><p>Voicer</p><p class="Wri">分享生活和设计美学</p><P class="Love"><svg t="1679229053148" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3234" width="25" height="25"><path d="M921.6 288.341333a42.666667 42.666667 0 0 1-81.066667 26.666667 163.669333 163.669333 0 0 0-40.405333-64.682667c-66.346667-66.346667-174.592-66.261333-241.408 0.085334l-16.213333 16.597333a43.818667 43.818667 0 0 1-61.013334 0l-16.64-17.066667a171.221333 171.221333 0 0 0-240.981333 0.384 171.221333 171.221333 0 0 0 0 241.749334L512 780.202667l18.944-18.901334a42.624 42.624 0 1 1 60.330667 60.330667l-49.109334 49.066667a42.496 42.496 0 0 1-60.330666 0l-318.293334-318.293334a256.597333 256.597333 0 0 1 0-362.410666c95.146667-95.189333 247.850667-99.413333 348.501334-12.544 101.034667-86.784 253.354667-82.517333 348.416 12.544A248.149333 248.149333 0 0 1 921.6 288.341333zM768 384a42.666667 42.666667 0 1 1-85.333333 0 42.666667 42.666667 0 1 1 85.333333 0z m85.333333 0a42.666667 42.666667 0 1 1 0 85.333333 42.666667 42.666667 0 1 1 0-85.333333z m-213.333333 42.666667a42.666667 42.666667 0 1 1-85.333333 0 42.666667 42.666667 0 1 1 85.333333 0z m85.333333 42.666666c94.122667 0 170.666667 76.544 170.666667 170.666667 0 47.061333-38.272 85.333333-85.333333 85.333333h-170.666667c-47.061333 0-85.333333-38.272-85.333333-85.333333 0-94.122667 76.544-170.666667 170.666666-170.666667z m-85.333333 170.666667h170.538667c0.128-47.104-38.144-85.333333-85.205334-85.333333-47.061333 0-85.333333 38.272-85.333333 85.333333z" fill="#ffffff" p-id="3235"></path></svg></P></div> </div></a>
                   <a href="###"><div class="book"><div class="BookContent"><p>Voicer</p><p class="Wri">分享生活和设计美学</p><P class="Love"><svg t="1679229053148" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3234" width="25" height="25"><path d="M921.6 288.341333a42.666667 42.666667 0 0 1-81.066667 26.666667 163.669333 163.669333 0 0 0-40.405333-64.682667c-66.346667-66.346667-174.592-66.261333-241.408 0.085334l-16.213333 16.597333a43.818667 43.818667 0 0 1-61.013334 0l-16.64-17.066667a171.221333 171.221333 0 0 0-240.981333 0.384 171.221333 171.221333 0 0 0 0 241.749334L512 780.202667l18.944-18.901334a42.624 42.624 0 1 1 60.330667 60.330667l-49.109334 49.066667a42.496 42.496 0 0 1-60.330666 0l-318.293334-318.293334a256.597333 256.597333 0 0 1 0-362.410666c95.146667-95.189333 247.850667-99.413333 348.501334-12.544 101.034667-86.784 253.354667-82.517333 348.416 12.544A248.149333 248.149333 0 0 1 921.6 288.341333zM768 384a42.666667 42.666667 0 1 1-85.333333 0 42.666667 42.666667 0 1 1 85.333333 0z m85.333333 0a42.666667 42.666667 0 1 1 0 85.333333 42.666667 42.666667 0 1 1 0-85.333333z m-213.333333 42.666667a42.666667 42.666667 0 1 1-85.333333 0 42.666667 42.666667 0 1 1 85.333333 0z m85.333333 42.666666c94.122667 0 170.666667 76.544 170.666667 170.666667 0 47.061333-38.272 85.333333-85.333333 85.333333h-170.666667c-47.061333 0-85.333333-38.272-85.333333-85.333333 0-94.122667 76.544-170.666667 170.666666-170.666667z m-85.333333 170.666667h170.538667c0.128-47.104-38.144-85.333333-85.205334-85.333333-47.061333 0-85.333333 38.272-85.333333 85.333333z" fill="#ffffff" p-id="3235"></path></svg></P></div> </div></a>
                   <a href="###"><div class="book"><div class="BookContent"><p>Voicer</p><p class="Wri">分享生活和设计美学</p><P class="Love"><svg t="1679229053148" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3234" width="25" height="25"><path d="M921.6 288.341333a42.666667 42.666667 0 0 1-81.066667 26.666667 163.669333 163.669333 0 0 0-40.405333-64.682667c-66.346667-66.346667-174.592-66.261333-241.408 0.085334l-16.213333 16.597333a43.818667 43.818667 0 0 1-61.013334 0l-16.64-17.066667a171.221333 171.221333 0 0 0-240.981333 0.384 171.221333 171.221333 0 0 0 0 241.749334L512 780.202667l18.944-18.901334a42.624 42.624 0 1 1 60.330667 60.330667l-49.109334 49.066667a42.496 42.496 0 0 1-60.330666 0l-318.293334-318.293334a256.597333 256.597333 0 0 1 0-362.410666c95.146667-95.189333 247.850667-99.413333 348.501334-12.544 101.034667-86.784 253.354667-82.517333 348.416 12.544A248.149333 248.149333 0 0 1 921.6 288.341333zM768 384a42.666667 42.666667 0 1 1-85.333333 0 42.666667 42.666667 0 1 1 85.333333 0z m85.333333 0a42.666667 42.666667 0 1 1 0 85.333333 42.666667 42.666667 0 1 1 0-85.333333z m-213.333333 42.666667a42.666667 42.666667 0 1 1-85.333333 0 42.666667 42.666667 0 1 1 85.333333 0z m85.333333 42.666666c94.122667 0 170.666667 76.544 170.666667 170.666667 0 47.061333-38.272 85.333333-85.333333 85.333333h-170.666667c-47.061333 0-85.333333-38.272-85.333333-85.333333 0-94.122667 76.544-170.666667 170.666666-170.666667z m-85.333333 170.666667h170.538667c0.128-47.104-38.144-85.333333-85.205334-85.333333-47.061333 0-85.333333 38.272-85.333333 85.333333z" fill="#ffffff" p-id="3235"></path></svg></P></div> </div></a>
                   <a href="###"><div class="book"><div class="BookContent"><p>Voicer</p><p class="Wri">分享生活和设计美学</p><P class="Love"><svg t="1679229053148" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3234" width="25" height="25"><path d="M921.6 288.341333a42.666667 42.666667 0 0 1-81.066667 26.666667 163.669333 163.669333 0 0 0-40.405333-64.682667c-66.346667-66.346667-174.592-66.261333-241.408 0.085334l-16.213333 16.597333a43.818667 43.818667 0 0 1-61.013334 0l-16.64-17.066667a171.221333 171.221333 0 0 0-240.981333 0.384 171.221333 171.221333 0 0 0 0 241.749334L512 780.202667l18.944-18.901334a42.624 42.624 0 1 1 60.330667 60.330667l-49.109334 49.066667a42.496 42.496 0 0 1-60.330666 0l-318.293334-318.293334a256.597333 256.597333 0 0 1 0-362.410666c95.146667-95.189333 247.850667-99.413333 348.501334-12.544 101.034667-86.784 253.354667-82.517333 348.416 12.544A248.149333 248.149333 0 0 1 921.6 288.341333zM768 384a42.666667 42.666667 0 1 1-85.333333 0 42.666667 42.666667 0 1 1 85.333333 0z m85.333333 0a42.666667 42.666667 0 1 1 0 85.333333 42.666667 42.666667 0 1 1 0-85.333333z m-213.333333 42.666667a42.666667 42.666667 0 1 1-85.333333 0 42.666667 42.666667 0 1 1 85.333333 0z m85.333333 42.666666c94.122667 0 170.666667 76.544 170.666667 170.666667 0 47.061333-38.272 85.333333-85.333333 85.333333h-170.666667c-47.061333 0-85.333333-38.272-85.333333-85.333333 0-94.122667 76.544-170.666667 170.666666-170.666667z m-85.333333 170.666667h170.538667c0.128-47.104-38.144-85.333333-85.205334-85.333333-47.061333 0-85.333333 38.272-85.333333 85.333333z" fill="#ffffff" p-id="3235"></path></svg></P></div> </div></a>
                   <a href="###"><div class="book"><div class="BookContent"><p>Voicer</p><p class="Wri">分享生活和设计美学</p><P class="Love"><svg t="1679229053148" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3234" width="25" height="25"><path d="M921.6 288.341333a42.666667 42.666667 0 0 1-81.066667 26.666667 163.669333 163.669333 0 0 0-40.405333-64.682667c-66.346667-66.346667-174.592-66.261333-241.408 0.085334l-16.213333 16.597333a43.818667 43.818667 0 0 1-61.013334 0l-16.64-17.066667a171.221333 171.221333 0 0 0-240.981333 0.384 171.221333 171.221333 0 0 0 0 241.749334L512 780.202667l18.944-18.901334a42.624 42.624 0 1 1 60.330667 60.330667l-49.109334 49.066667a42.496 42.496 0 0 1-60.330666 0l-318.293334-318.293334a256.597333 256.597333 0 0 1 0-362.410666c95.146667-95.189333 247.850667-99.413333 348.501334-12.544 101.034667-86.784 253.354667-82.517333 348.416 12.544A248.149333 248.149333 0 0 1 921.6 288.341333zM768 384a42.666667 42.666667 0 1 1-85.333333 0 42.666667 42.666667 0 1 1 85.333333 0z m85.333333 0a42.666667 42.666667 0 1 1 0 85.333333 42.666667 42.666667 0 1 1 0-85.333333z m-213.333333 42.666667a42.666667 42.666667 0 1 1-85.333333 0 42.666667 42.666667 0 1 1 85.333333 0z m85.333333 42.666666c94.122667 0 170.666667 76.544 170.666667 170.666667 0 47.061333-38.272 85.333333-85.333333 85.333333h-170.666667c-47.061333 0-85.333333-38.272-85.333333-85.333333 0-94.122667 76.544-170.666667 170.666666-170.666667z m-85.333333 170.666667h170.538667c0.128-47.104-38.144-85.333333-85.205334-85.333333-47.061333 0-85.333333 38.272-85.333333 85.333333z" fill="#ffffff" p-id="3235"></path></svg></P></div> </div></a>
                   <a href="###"><div class="book"><div class="BookContent"><p>Voicer</p><p class="Wri">分享生活和设计美学</p><P class="Love"><svg t="1679229053148" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3234" width="25" height="25"><path d="M921.6 288.341333a42.666667 42.666667 0 0 1-81.066667 26.666667 163.669333 163.669333 0 0 0-40.405333-64.682667c-66.346667-66.346667-174.592-66.261333-241.408 0.085334l-16.213333 16.597333a43.818667 43.818667 0 0 1-61.013334 0l-16.64-17.066667a171.221333 171.221333 0 0 0-240.981333 0.384 171.221333 171.221333 0 0 0 0 241.749334L512 780.202667l18.944-18.901334a42.624 42.624 0 1 1 60.330667 60.330667l-49.109334 49.066667a42.496 42.496 0 0 1-60.330666 0l-318.293334-318.293334a256.597333 256.597333 0 0 1 0-362.410666c95.146667-95.189333 247.850667-99.413333 348.501334-12.544 101.034667-86.784 253.354667-82.517333 348.416 12.544A248.149333 248.149333 0 0 1 921.6 288.341333zM768 384a42.666667 42.666667 0 1 1-85.333333 0 42.666667 42.666667 0 1 1 85.333333 0z m85.333333 0a42.666667 42.666667 0 1 1 0 85.333333 42.666667 42.666667 0 1 1 0-85.333333z m-213.333333 42.666667a42.666667 42.666667 0 1 1-85.333333 0 42.666667 42.666667 0 1 1 85.333333 0z m85.333333 42.666666c94.122667 0 170.666667 76.544 170.666667 170.666667 0 47.061333-38.272 85.333333-85.333333 85.333333h-170.666667c-47.061333 0-85.333333-38.272-85.333333-85.333333 0-94.122667 76.544-170.666667 170.666666-170.666667z m-85.333333 170.666667h170.538667c0.128-47.104-38.144-85.333333-85.205334-85.333333-47.061333 0-85.333333 38.272-85.333333 85.333333z" fill="#ffffff" p-id="3235"></path></svg></P></div> </div></a>
               </div>
           </div>
          <div class="Section">
              <div class = "Title" id = 'B2'>
                  <p>少儿童书</p>
              </div>
              <div class="Books">
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
              </div>
          </div>
          <div class="Section">
              <div class = "Title" id = 'B3'>
                  <p>人文社科</p>
              </div>
              <div class="Books">
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
              </div>
          </div>
          <div class="Section">
              <div class = "Title" id = 'B4'>
                  <p>人文社科</p>
              </div>
              <div class="Books">
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
              </div>
          </div>
          <div class="Section">
              <div class = "Title" id = 'B5'>
                  <p>经管励志</p>
              </div>
              <div class="Books">
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
              </div>
          </div>
          <div class="Section">
              <div class = "Title "id = 'B6'>
                  <p>生活时尚</p>
              </div>
              <div class="Books">
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
              </div>
          </div>
          <div class="Section">
              <div class = "Title"id = 'B7'>
                  <p>科技教育</p>
              </div>
              <div class="Books">
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
              </div>
          </div>
          <div class="Section">
              <div class = "Title" id = 'B8'>
                  <p>影视原版</p>
              </div>
              <div class="Books">
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
              </div>
          </div>
          <div class="Section">
              <div class = "Title" id = 'B9'>
                  <p>教辅印象</p>
              </div>
              <div class="Books">
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
              </div>
          </div>
          <div class="Section">
              <div class = "Title" id = 'B10'>
                  <p>家庭园艺</p>
              </div>
              <div class="Books">
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
                  <a href="###"><div class="book"> </div></a>
              </div>
          </div>


      </div>
      </div>

  </div>
  <div id ='Enroll'>
      <div id = 'En-title'>
          <h2>LOGIN</h2> <a href="###" id="Close"><svg t="1679222568824" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="30" height="30"><path d="M499.2 951.466667c-234.666667 0-426.666667-192-426.666667-426.666667 0-17.066667 0-38.4 4.266667-55.466667 4.266667-12.8 12.8-17.066667 25.6-17.066666 12.8 4.266667 17.066667 12.8 17.066667 25.6-4.266667 12.8-4.266667 29.866667-4.266667 46.933333 0 213.333333 170.666667 384 384 384s384-170.666667 384-384-170.666667-384-384-384c-25.6 0-46.933333 4.266667-72.533333 8.533333-12.8 0-21.333333-4.266667-25.6-17.066666 0-12.8 4.266667-21.333333 17.066666-25.6 25.6-4.266667 51.2-8.533333 81.066667-8.533334 234.666667 0 426.666667 192 426.666667 426.666667s-192 426.666667-426.666667 426.666667z" fill="#13227a" p-id="3906"></path><path d="M119.466667 418.133333h-8.533334c-8.533333-4.266667-17.066667-17.066667-12.8-29.866666 42.666667-119.466667 128-213.333333 238.933334-256 12.8-4.266667 21.333333 0 25.6 12.8 4.266667 12.8 0 21.333333-12.8 25.6C256 213.333333 174.933333 298.666667 140.8 405.333333c-4.266667 8.533333-12.8 12.8-21.333333 12.8z" fill="#13227a" p-id="3907"></path><path d="M392.533333 657.066667c-4.266667 0-12.8 0-17.066666-4.266667-8.533333-8.533333-8.533333-21.333333 0-29.866667l213.333333-213.333333c8.533333-8.533333 21.333333-8.533333 29.866667 0s8.533333 21.333333 0 29.866667l-213.333334 213.333333c0 4.266667-8.533333 4.266667-12.8 4.266667z" fill="#13227a" p-id="3908"></path><path d="M605.866667 657.066667c-4.266667 0-12.8 0-17.066667-4.266667l-213.333333-213.333333c-8.533333-8.533333-8.533333-21.333333 0-29.866667s21.333333-8.533333 29.866666 0l213.333334 213.333333c8.533333 8.533333 8.533333 21.333333 0 29.866667 0 4.266667-8.533333 4.266667-12.8 4.266667z" fill="#13227a" p-id="3909"></path></svg></a>
      </div>
      <div class="Content">
          <input type="text" placeholder="用户名" id="username">
          <input type="password" placeholder="密码" id="password">
          <br>
          <button onclick="SubmitUserInfo()">登录</button>
          <br>
          <button onclick="enroll()">注册</button>
      </div>
  </div>
  <div id = 'Bg'></div>
  <div id ='Enroll2'>
    <div id = 'En-title'>
        <h2>QUIT</h2> <a href="###" id="Close2"><svg t="1679222568824" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="30" height="30"><path d="M499.2 951.466667c-234.666667 0-426.666667-192-426.666667-426.666667 0-17.066667 0-38.4 4.266667-55.466667 4.266667-12.8 12.8-17.066667 25.6-17.066666 12.8 4.266667 17.066667 12.8 17.066667 25.6-4.266667 12.8-4.266667 29.866667-4.266667 46.933333 0 213.333333 170.666667 384 384 384s384-170.666667 384-384-170.666667-384-384-384c-25.6 0-46.933333 4.266667-72.533333 8.533333-12.8 0-21.333333-4.266667-25.6-17.066666 0-12.8 4.266667-21.333333 17.066666-25.6 25.6-4.266667 51.2-8.533333 81.066667-8.533334 234.666667 0 426.666667 192 426.666667 426.666667s-192 426.666667-426.666667 426.666667z" fill="#13227a" p-id="3906"></path><path d="M119.466667 418.133333h-8.533334c-8.533333-4.266667-17.066667-17.066667-12.8-29.866666 42.666667-119.466667 128-213.333333 238.933334-256 12.8-4.266667 21.333333 0 25.6 12.8 4.266667 12.8 0 21.333333-12.8 25.6C256 213.333333 174.933333 298.666667 140.8 405.333333c-4.266667 8.533333-12.8 12.8-21.333333 12.8z" fill="#13227a" p-id="3907"></path><path d="M392.533333 657.066667c-4.266667 0-12.8 0-17.066666-4.266667-8.533333-8.533333-8.533333-21.333333 0-29.866667l213.333333-213.333333c8.533333-8.533333 21.333333-8.533333 29.866667 0s8.533333 21.333333 0 29.866667l-213.333334 213.333333c0 4.266667-8.533333 4.266667-12.8 4.266667z" fill="#13227a" p-id="3908"></path><path d="M605.866667 657.066667c-4.266667 0-12.8 0-17.066667-4.266667l-213.333333-213.333333c-8.533333-8.533333-8.533333-21.333333 0-29.866667s21.333333-8.533333 29.866666 0l213.333334 213.333333c8.533333 8.533333 8.533333 21.333333 0 29.866667 0 4.266667-8.533333 4.266667-12.8 4.266667z" fill="#13227a" p-id="3909"></path></svg></a>
    </div>
    <div class="Content">
        <!-- <input type="text" placeholder="用户名" id="username">
        <input type="password" placeholder="密码" id="password">
        <br>
        <button onclick="SubmitUserInfo()">登录另一个用户</button>
        <br> -->
        <button onclick="quit()">登出</button>
    </div>
</div>
<div id = 'Bg2'></div>
 
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 引入组件库 -->
  <script src="/backend/plugins/element-ui/index.js"></script>
  <!-- 引入axios -->
  <script src="/backend/plugins/axios/axios.min.js"></script>
  <script src="/backend/js/request.js"></script>
  <script src="/backend/api/login.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <script type="text/javascript">
    let quanju = 1;
    let data;
    //将quanju变量存储存到全局变量中来判断是否登录
    quanju=JSON.parse(localStorage.getItem('quanjuData'));
    // alert(quanju1);
    if(quanju == 1){
    var gzhissb = JSON.parse(localStorage.getItem('userData'));
    var Gzhissb = document.getElementById("gzhissb");
    Gzhissb.textContent = gzhissb;
    }
    
    function SubmitUserInfo() {
    let username = document.getElementById('username').value;
    let password = document.getElementById('password').value;
    axios({
        method: 'get',//提交方法
        url: 'http://localhost:8088/user',//提交地址
        params: {
        username,
        password
        }
        }).then((res) => {
        console.log(res);
        // alert(res.data);
        if(res.data == username){
            data = res.data;
            console.log(data);
            alert("登录成功");
            quanju = 1; 
            // alert(quanju);
            //存入全局变量进入quanjuData然后可以让跳转后的页面也可以知晓这个页面全局变量的变动来进行变化
            localStorage.setItem('quanjuData', JSON.stringify(quanju));
            localStorage.setItem('userData', JSON.stringify(data));
            window.location.href = 'file:///C:/Users/18462/Desktop/JAVAWEB/NEW%20TEST/src/Index.html';
        }
        else if(res.data == 1){
            alert("用户名错误");
        }
        else if(res.data == 0){
            alert("密码错误");
        }
        })
        const data1 = JSON.parse(localStorage.getItem('userData'));
        //确定了data1数据是存入了localStorage
        // alert(data1);
        // 抹去localStorage中的用户信息
        // localStorage.removeItem('userData');
        // const data2 = JSON.parse(localStorage.getItem('userData'));
        // alert(data2);
        
    }
    
   
    function enroll() {
    let username = document.getElementById('username').value;
    let password = document.getElementById('password').value;
    if(username != "" && password != ""){
    axios({
        method: 'post',//提交方法
        url: 'http://localhost:8088/enroll',//提交地址
        params: {
        username,
        password
        }
        }).then((res) => {
        console.log(res);
        alert(res.data);
        })
    }
    else{
        alert("不能为空")
    }
    username.value = '';
    password.value = '';
    }

    function quit(){
        localStorage.clear();
        quanju=0;
        localStorage.setItem('quanjuData', JSON.stringify(quanju));
        window.location.href = "file:///C:/Users/18462/Desktop/JAVAWEB/NEW%20TEST/src/Index.html";
    }
   
</script>
 
 
 
 <script>
     let Link = document.querySelector('#Login')
     let Login = document.querySelector('#Enroll')
     let Bg = document.querySelector('#Bg')
     let Login2 = document.querySelector('#Enroll2')
     let Bg2 = document.querySelector('#Bg2')
     let CloseBtn = document.querySelector('#Close')
     let CloseBtn2 = document.querySelector('#Close2')

     if(quanju == 0){
        Link.addEventListener('click',function (){
        Bg.style.display = 'block'
        Login.style.display = 'block'

     })
     CloseBtn.addEventListener('click',function(){
        Bg.style.display = 'none'
        Login.style.display = 'none'
     })
     }
     if(quanju == 1){
        Link.addEventListener('click',function (){
        Bg2.style.display = 'block'
        Login2.style.display = 'block'

     })
     CloseBtn2.addEventListener('click',function(){
        Bg2.style.display = 'none'
        Login2.style.display = 'none'
     })
     }
 </script>
</body>
</html>